<%
    var obj={pageTitle:"新增商品"}
%>
{{include "../layout_header.html" obj}}
<div class=" container">
    <div class="page-header">
        <h2 class=" text-primary text-center">新增商品</h2>
    </div>
    <form id="addGoodsInfoForm" class=" form-horizontal" method="POST" action="/goodsInfo/doAddGoodsInfo?_csrf={{csrf}}"
        enctype="multipart/form-data">
        <div class=" form-group">
            <label for="" class=" control-label col-sm-2">
                商品名称
            </label>
            <div class="col-sm-7">
                <input type="text" name="goodsname" class=" form-control" placeholder="请输入商品名称"
                    data-rule-required="true">
            </div>
            <div class="col-sm-3"></div>
        </div>
        <div class=" form-group">
            <label for="" class=" control-label col-sm-2">
                商品价格
            </label>
            <div class="col-sm-7">
                <input type="text" name="goodsprice" class=" form-control" placeholder="请输入商品价格"
                    data-rule-required="true" data-rule-number="true">
            </div>
            <div class="col-sm-3"></div>
        </div>
        <div class=" form-group">
            <label for="" class=" control-label col-sm-2">
                商品折扣
            </label>
            <div class="col-sm-7">
                <input type="range" min="0" max="1" value="1" step="0.05" id="goodsoffset" name="goodsoffset"
                    placeholder="请输入商品折扣" data-rule-required="true">
            </div>

            <div class="col-sm-3"></div>
        </div>
        <div class=" form-group">
            <label for="" class=" control-label col-sm-2">
                商品总数
            </label>
            <div class="col-sm-7">
                <input type="text" name="goodscount" class=" form-control" placeholder="请输入商品总数"
                    data-rule-required="true" data-rule-digits="true">
            </div>
            <div class="col-sm-3"></div>
        </div>

        <!-- 商品图片 -->
        <div class=" form-group">
            <label for="" class=" control-label col-sm-2">
                商品图片
            </label>
            <div class="col-sm-7">
                <input type="file" name="goodsimg" id="goodsimg" accept="image/*" style="display: none;">
                <button type="button" class=" btn btn-primary btn-sm"
                    onclick="document.getElementById('goodsimg').click()">
                    <span class=" glyphicon glyphicon-cloud-upload"></span>上传图片
                </button>
                <img src="" alt="" id="goodsimg_view" style="height:40px">
            </div>
            <div class="col-sm-3"></div>
        </div>

        <div class=" form-group">
            <label for="" class=" control-label col-sm-2">
                商品状态
            </label>
            <div class="col-sm-7">
                <select name="goodsstatus" class=" form-control">
                    <option value="1">上架</option>
                    <option value="0">下架</option>
                </select>
            </div>
            <div class="col-sm-3"></div>
        </div>
        <div class=" form-group">
            <label for="" class=" control-label col-sm-2">
                商品分类
            </label>
            <div class="col-sm-7">
                <select name="categoryid" class="form-control">
                    {{each categoryInfoList item index}}
                    <option value="{{item.categoryid}}">{{item.categoryname}}</option>
                    {{/each}}
                </select>
            </div>
            <div class="col-sm-3"></div>
        </div>
        <div class=" form-group">
            <label for="" class=" control-label col-sm-2">
                商品属性
            </label>
            <div class="col-sm-7">
                <input type="hidden" name="goodsproperty" id="goodsproperty">
                <div id="editor">

                </div>
            </div>
            <div class="col-sm-3"></div>
        </div>

        <div class=" form-group">
            <div class="col-sm-7 col-sm-offset-2">
                <button type="submit" class="btn btn-primary" id="btnSave">
                    <span class=" glyphicon glyphicon-floppy-saved"></span> 保存数据
                </button>
                <a href="/goodsInfo/list" class=" btn btn-danger">
                    <span class=" glyphicon glyphicon-chevron-left"></span> 返回列表
                </a>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../public/js/release/wangEditor.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#addGoodsInfoForm").validate({
            errorPlacement: function (error, element) {
                error.appendTo(element.parent().next());
            },
            errorClass: "text-danger"
        });
        $("#goodsoffset").change(function () {
            var value = $(this).val();
            $(this).parent().next().text(value);
        });
        $("#goodsimg").change(function () {
            //将文件转base64以后在img标签里面显示出来预览
            var file = this.files[0];
            //使用HTML5的FileReader去读文件
            var fr = new FileReader();
            fr.onload = function (e) {
                $("#goodsimg_view").attr("src", e.target.result);
            }
            fr.readAsDataURL(file);
        });

        var E = window.wangEditor;
        var editor = new E('#editor');
        editor.create();

        $("#btnSave").click(function () {
            $("#goodsproperty").val(editor.txt.html());
        });
    })
</script>

{{include "../layout_footer.html"}}